<template>
  <el-card class="box-card" style="max-width: 600px; margin: 20px auto; position: relative; padding-bottom: 60px;">
    <div slot="header" class="clearfix">
      <span>修改用户</span>
    </div>
    <el-form :model="user" ref="userForm" label-width="80px" @submit.prevent="submitForm">
      <el-form-item label="账号" prop="username" :rules="[{ required: true, message: '请输入账号', trigger: 'blur' }]">
        <el-input v-model="user.username" placeholder="请输入账号" autocomplete="off" />
      </el-form-item>

      <el-form-item label="密码" prop="password" :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]">
        <el-input type="password" v-model="user.password" placeholder="请输入密码" autocomplete="off" />
      </el-form-item>

      <el-form-item label="昵称" prop="nickname" :rules="[{ required: true, message: '请输入昵称', trigger: 'blur' }]">
        <el-input v-model="user.nickname" placeholder="请输入昵称" autocomplete="off" />
      </el-form-item>

      <el-form-item label="邮箱" prop="email" :rules="[
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ]">
        <el-input v-model="user.email" placeholder="请输入邮箱" autocomplete="off" />
      </el-form-item>

      <el-form-item label="状态" prop="status" :rules="[{ required: true, message: '请选择状态', trigger: 'change' }]">
        <el-select v-model="user.status" placeholder="请选择状态">
          <el-option label="正常" :value="1" />
          <el-option label="封禁" :value="0" />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm">立即提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 独立一行、右下角的返回按钮 -->
    <div style="position: absolute; right: 20px; bottom: 20px;">
      <el-button type="info" @click="goBack">返回用户列表</el-button>
    </div>
  </el-card>
</template>

<script>
import { get, update } from '@/api/auth';

export default {
  data() {
    return {
      user: {
        username: '',
        password: '',
        nickname: '',
        email: '',
        status: ''  // 默认正常
      }
    };
  },
  mounted() {
    this.fetchUser();
  },
  methods: {
    fetchUser() {
      const userId = this.$route.query.id;
      if (userId) {
        get(userId)
            .then(res => {
              if (res.data && res.data.username) {
                this.user = {
                  ...res.data,
                  status: Number(res.data.status) // ✅ 强制转换为数字，el-select 才能正常匹配
                };
              } else {
                this.$message.error('无法获取用户数据');
              }
            })
      }
    },
    submitForm() {
      this.$refs.userForm.validate(valid => {
        if (!valid) return;
        update(this.user)
            .then(res => {
              if (res.data != null) {
                this.$message.success('用户信息更新成功');
                this.$router.push('/user');
              } else {
                this.$message.error('更新用户信息失败');
              }
            })
            .catch(() => {
              this.$message.error('更新用户信息失败');
            });
      });
    },
    resetForm() {
      this.$refs.userForm.resetFields();
      this.fetchUser();
    },
    goBack() {
      this.$router.push('/user');
    }
  }
};
</script>

<style scoped>
.box-card {
  padding: 20px;
  border-radius: 8px;
  position: relative;
}
</style>
